import React from 'react';
import { pictureStyle } from './constants';
import ModuleImgHorizontal from './Horizontal';
import ModuleImgHorizontalScroll from './HorizontalScroll';
import './index.scss';
import ModuleImgVertical from './Vertical';

const components = {
  [pictureStyle.vertical]: ModuleImgVertical,
  [pictureStyle.horizontal]: ModuleImgHorizontal,
  [pictureStyle.scroll]: ModuleImgHorizontalScroll,
};

const ModuleImg = ({ componentCfg: { styleSetting, styleSettingRender, content } = {} }) => {
  const CustomTag = components[styleSettingRender.style];

  if (!CustomTag) {
    return null;
  }

  return (
    <CustomTag
      {...{
        styleSetting,
        styleSettingRender,
        imgUrlList: content?.items ?? [],
      }}
    />
  );
};

export default ModuleImg;
